<template>
  <div style="height: 6vh;background-color: white;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px;">车辆维修</span>
    <el-button type="primary" style="float: right;margin-top: 13px;" @click="addVehicle">录入维修车辆</el-button>
  </div>
<!--  新增维修车辆弹窗-->
  <el-dialog style="width: 1000px;padding: 40px;" v-model="dialogVisible" :title="dialogTitle" :before-close="handleclose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修人">
            <el-input readonly :value="isEditMode ? addRepairVehicle.username : user.username" v-model="addRepairVehicle.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修车辆">
            <el-select placeholder="请选择车牌号" v-model="addRepairVehicle.vehicleId">
              <el-option v-for="item in vehicleIdArr" :label="item.license" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修项目">
            <el-select placeholder="请选择" v-model="addRepairVehicle.item">
              <el-option label="汽车保养" value="10"></el-option>
              <el-option label="汽车美容" value="20"></el-option>
              <el-option label="钣金喷漆" value="30"></el-option>
              <el-option label="四轮定位" value="40"></el-option>
              <el-option label="机修" value="30"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修地点">
            <el-select placeholder="请选择" v-model="addRepairVehicle.addr">
              <el-option label="沃尔沃专修店" value="10"></el-option>
              <el-option label="美奥行汽修" value="20"></el-option>
              <el-option label="悦心金峰盛车检汽修" value="30"></el-option>
              <el-option label="京昌鑫顺汽修" value="40"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修材料">
            <el-select placeholder="请选择" v-model="addRepairVehicle.material">
              <el-option label="汽缸垫进排气歧管垫" value="10"></el-option>
              <el-option label="发动机前后悬挂胶垫" value="20"></el-option>
              <el-option label="板簧胶套" value="30"></el-option>
              <el-option label="消声器" value="40"></el-option>
              <el-option label="气门弹簧" value="50"></el-option>
              <el-option label="气门" value="60"></el-option>
              <el-option label="止推垫" value="70"></el-option>
              <el-option label="大小瓦" value="80"></el-option>
              <el-option label="四配套（缸套、活塞、活塞环、活塞销）" value="90"></el-option>
              <el-option label="轴承" value="100"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修费用">
            <el-input placeholder="请输入" v-model="addRepairVehicle.fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="维修时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="addRepairVehicle.repairTime"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维修状态">
            <el-radio-group v-model="addRepairVehicle.status">
              <el-radio label="维修中" value="1"></el-radio>
              <el-radio label="已完成" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleclose">取消</el-button>
      <el-button type="primary" @click="addRepair">保存</el-button>
    </template>
<!--    维修车辆搜索卡片-->
  </el-dialog>
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="维修车辆" style="width: 270px;">
        <el-input placeholder="请输入车牌号" v-model="searchVehicle.license" @keydown.enter="searchVehicleForm"></el-input>
      </el-form-item>
      <el-form-item label="送修人员" style="width: 270px;">
        <el-input placeholder="请输入送修人姓名" v-model="searchVehicle.username" @keydown.enter="searchVehicleForm"></el-input>
      </el-form-item>
      <el-form-item label="维修状态" style="width: 290px;">
        <el-select placeholder="请选择用户状态" v-model="searchVehicle.status" @change="searchVehicleForm">
          <el-option label="维修中" value="1"></el-option>
          <el-option label="已完成" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="searchVehicleForm">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
<!--  页面主体内容：维修车辆表单-->
  <el-card style="margin: 20px;">
    <el-table :data="vehicleArr">
      <el-table-column label="编号" type="index" width="80" align="center"></el-table-column>
      <el-table-column label="维修车辆" prop="license" align="center"></el-table-column>
      <el-table-column label="维修项目" prop="item" align="center"
      :formatter="itemFormatter"></el-table-column>
      <el-table-column label="送修人员" prop="username" align="center"></el-table-column>
      <el-table-column label="维修地点" prop="addr" align="center"
      :formatter="addrFormatter"></el-table-column>
      <el-table-column label="维修时间" prop="repairTime" align="center"></el-table-column>
      <el-table-column label="维修费用" prop="fee" align="center"></el-table-column>
      <el-table-column label="维修材料" prop="material" align="center"
       :formatter="materialFormatter"></el-table-column>
      <el-table-column label="维修状态" prop="status" align="center">
        <template #default="scope">
          <el-switch active-value="1" inactive-value="0" v-model="scope.row.status"
                     @change="updateStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" link @click="editVehicle(scope.row.id)">编辑</el-button>
          <el-button type="primary" link @click="deleteById(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";
const isEditMode = ref(false);
const dialogVisible=ref(false);
const vehicleArr=ref([]);
const searchVehicle=ref({
  license:'',
  username:'',
  status:''
});
const searchVehicleForm = () => {
  let data=qs.stringify(searchVehicle.value);
  axios.get(BASE_URL+'/v1/repair/select?'+data)
      .then((response)=>{
        if(response.data.code==2000){
          vehicleArr.value=response.data.data;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
};
const user=ref(getUser());
const vehicleIdArr=ref([]);
const loadVehicleId = () => {
  axios.get(BASE_URL+'/v1/repair/selectVehicleId')
      .then((response)=>{
        if(response.data.code==2000){
          vehicleIdArr.value=response.data.data;
        }else {
          ElMessage.error(response.data.msg);
        }
      })
};
onMounted(()=>{
  searchVehicleForm();
  loadVehicleId();
});
const reset = () => {
  searchVehicle.value= {};
  searchVehicleForm();
};
const addRepairVehicle=ref({
  username:'',
  vehicleId:'',
  item:'',
  addr:'',
  material:'',
  fee:'',
  repairTime:'',
  status:'',
});
const addRepair = () => {
  addRepairVehicle.value.username=user.value.username;
  console.log(addRepairVehicle.value);
  axios.post(BASE_URL+'/v1/repair/addRepair',addRepairVehicle.value)
      .then((response)=>{
        if(response.data.code==2000){
          ElMessage.success('保存成功!');
          addRepairVehicle.value={};
          dialogVisible.value=false;
          searchVehicleForm();
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
const addVehicle = () => {
  isEditMode.value = false;
  dialogVisible.value=true;
  dialogTitle.value='录入维修车辆';
}
const dialogTitle=ref('录入维修车辆')
const handleclose = () => {
  if(confirm('是否确认关闭!')){
    dialogVisible.value=false;
    addRepairVehicle.value={};
  }
}
const editVehicle = (id) => {
  isEditMode.value = true;
  dialogVisible.value=true;
  dialogTitle.value='编辑维修车辆';
  axios.get(BASE_URL+'/v1/repair/select?id='+id)
      .then((response)=>{
        if(response.data.code==2000){
          addRepairVehicle.value=response.data.data[0];
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
const deleteById = (id) => {
  if(confirm('确认是否删除!')){
    axios.post(BASE_URL+'/v1/repair/delete/'+id)
        .then((response)=>{
          if(response.data.code==2000){
            ElMessage.success('删除成功!');
            searchVehicleForm();
          }else {
            ElMessage.error(response.data.msg);
          }
        })
  }
};
const itemFormatter = (row,column,cellValue,index) => {
  if(!vehicleArr.value){
    return cellValue;
  }
  if(cellValue==10){
    cellValue='汽车保养';
  }else if(cellValue==20){
    cellValue='汽车美容';
  }else if(cellValue==30){
    cellValue='钣金喷漆';
  }else if(cellValue==40){
    cellValue='四轮定位';
  }else if(cellValue==50){
    cellValue='机修';
  }
  return cellValue;
}
const addrFormatter = (row,column,cellValue,index) => {
  if(!vehicleArr.value){
    return cellValue;
  }
  if(cellValue==10){
    cellValue='沃尔沃专修店';
  }else if(cellValue==20){
    cellValue='美奥行汽修';
  }else if(cellValue==30){
    cellValue='悦心金峰盛车检汽修';
  }else if(cellValue==40){
    cellValue='京昌鑫顺汽修';
  }
  return cellValue;
}
const materialFormatter = (row,column,cellValue,index) => {
  if(!vehicleArr.value){
    return cellValue;
  }
  if(cellValue==10){
    cellValue='汽缸垫进排气歧管垫';
  }else if(cellValue==20){
    cellValue='发动机前后悬挂胶垫';
  }else if(cellValue==30){
    cellValue='板簧胶套';
  }else if(cellValue==40){
    cellValue='消声器';
  }else if(cellValue==50){
    cellValue='气门弹簧';
  }else if(cellValue==60){
    cellValue='气门';
  }else if(cellValue==70){
    cellValue='止推垫';
  }else if(cellValue==80){
    cellValue='大小瓦';
  }else if(cellValue==90){
    cellValue='四配套(缸套、活塞、活塞环、活塞销)';
  }else if(cellValue==100){
    cellValue='轴承';
  }
  return cellValue;
}
const updateStatus = (id,status) => {
  axios.post(BASE_URL+'/v1/repair/update/'+id+"/"+status)
      .then((response)=>{
        if(response.data.code==2000){
          ElMessage.success('状态修改成功!')
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}
</script>
<style scoped>
</style>